<template>
	<!-- 主界面 -->
	<div class="main">
		<!-- 顶部 -->
		<div class="banner-top">
			<!-- 城市选择 -->
			<div class="city">
				<router-link to="/citys">
					<label>{{cityName}}<i class="iconfont icon-xiajiantou"></i></label>
				</router-link>
			</div>
			<!-- 搜索部分 -->
			<div class="search">
				<i class="iconfont icon-fangdajing"></i>
				<input type="text" placeholder="国内秋色盘点大全"/>
			</div>
		</div>
		<!-- 热搜 -->
		<div class="hot">
			<p>热搜</p>
			<div class="hot-list">
				<a v-for="item in hotlist" :key="item.id">{{item.title}}</a>
			</div>
		</div>
		<!-- 轮播图 -->
		<div class="swiper banner-swiper">
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="(item,index) in imglist" :key="index">
					<img :src="item.image" :alt="item.title">
				</li>
			</ul>
			<div class="swiper-pagination banner-swiper-pagination"></div>
		</div>
	</div>
</template>

<script>
	//引入vue周期函数
	import {onMounted} from 'vue';
	import {mapState} from 'vuex';
	
	//引入Swiper滑动插件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper';
	
	//应用Swiper组件配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	
	export default {
		name:'Banner',
		props:{
			propbannerlist:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data(){
			return {
				imglist:[],
				hotlist:[
					{id:1, title:'赏银杏', url:'/'},
					{id:2, title:'赏秋叶', url:'/'},
					{id:3, title:'秋日骑行', url:'/'},
					{id:4, title:'温泉滑雪', url:'/'}
				]
			}
		},
		watch:{
			propbannerlist(){
				this.imglist = this.propbannerlist;
			}
		},
		updated() {
			new Swiper('.banner-swiper' , {
				//循环播放
				loop:true,
				//设置分页器
				pagination:{
					el : '.banner-swiper-pagination'
				},
				//设置播放项[时间不停止，手指经过不暂停自动]
				autoplay:{
					delay : 3000,
					stopOnLastSlide : false,
					disableOnInteraction:false,
				}
			})
		},
		computed:{
			...mapState(['cityName'])
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.main{
		width: 100%;
		height: 5.5rem;
		background-color: #ffdd40;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}
	.banner-top{
		padding: 0 0.2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1rem;
	}
	.banner-top .city{
		font-size: 0.4rem;
		font-weight: bold;
	}
	.banner-top .city i{
		padding: 0 0.1rem;
	}
	.banner-top .search{
		width: 85%;
		height: 0.7rem;
		line-height: 0.7rem;
		border-radius: 0.5rem;
		background-color: white;
	}
	.banner-top .search i{
		padding: 0 0.2rem;
		font-size: 0.4rem;
	}
	.banner-top .search input{
		border: none;
		outline: none;
		width: 83%;
		font-size: 0.35rem;
	}
	.main .hot{
		margin-top: 0.2rem;
		display: flex;
		align-items: center;
		padding: 0 0.2rem 0 0.4rem;
		font-size: 0.35rem;
	}
	.main .hot p{
		width: 12%;
	}
	.main .hot-list{
		display: flex;
		width: 85%;
		justify-content: space-between;
	}
	.main .hot-list a{
		text-align: center;
		padding: 0.1rem 0.3rem;
		border-radius: 0.3rem;
		background:rgba(255,255,255,.7);
	}
	
	.swiper{
		margin-top: 0.2rem;
		width: 95%;
		display: flex;
		height: 4rem;
		text-align: center;
		border-radius: 0.2rem;
	}
	.swiper img{
		width: 100%;
	}
	.banner-swiper ul li:deep(.swiper-slide ){
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter:blur(5px);
	}
	/* 穿透 */
	.swiper-pagination:deep(.swiper-pagination-bullet-active){
		background-color: #ffdd40;
		width: 0.2rem;
		border-radius: 0.25rem;
		animation: 0.3s wmax forwards;
	}
	@keyframes wmax{
		from{width: 0.2rem;}
		to{width: 0.5rem;}
	}
</style>
